<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            height: 500px;
            background-color: #ccc;
            font-size: 0
        }

        span {
            font-size: 20px;
        }

        .s1 {
            background-color: #a73030;
        }

        .s2 {
            background-color: #9ba730;
        }

        .s3 {
            background-color: #38a730;
        }

        .s4 {
            background-color: #3040a7;
        }

        img {
            background-color: #fff;
        }

        .d1 {
            width: 600px;
            background-color: #d86666;

        }

        .ximg {
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <div class="outer">
        <span class="s1">白日依山尽</span>
        <span class="s2">黄河入海流</span>
        <span class="s3">欲穷千里目</span>
        <span class="s4">更上一层楼</span>
        <hr>
        <!-- 加入图片 -->
        <img width="100" src="./images/author.png" alt="">
        <img width="100" src="./images/author.png" alt="">
        <img width="100" src="./images/author.png" alt="">
    </div>
    <div class="d1">
        <img class="ximg" width="100" src="./images/author.png" alt="">
        <span>Xg</span>
    </div>
</body>

</html>